<!--
 * @Author: hu_binbin
 * @Date: 2021-08-19 11:11:24
 * @LastEditTime: 2021-08-26 16:07:03
 * @Description: 结束任务提醒
-->
<template>
	<article class="bg_4dbfae">
		<Theader :title="title">
			<template slot="header_arrow">
				<van-icon size="25" name="arrow-left" @click="$pageBack"/>
			</template>
		</Theader>
        <div class="card">
            <div class="card-title center_center">
                <van-image :src="icon.endWarn" width="27" height="27"></van-image>
                <span style="margin-left: 10px;">结束提示!</span>
            </div>
            <div class="card-content">
                您还可以选择以下工作协同开展，请确认是否需要同步开展！
            </div>
        </div>
        <!--巡视任务-->
        <div v-if="teamFlag">
            <div class="task-title">巡视任务</div>
            <div class="tab-con">
                <div class="tab-item" v-for="(item,index) in showTaskList" :key="index">
                    <div class="tab-title">
                        <span>待执行</span>
                        <label>东善桥变全面巡视</label>
                        <div class="tab-check">
                            <van-checkbox 
                            checked-color="#17B39B"
                            v-model="item.checked"></van-checkbox>
                        </div>
                    </div>
                    <div class="tab-sub">
                        <span>交花园山变电站</span>
                        <label>交流110kv</label>
                    </div>
                    <div class="tab-per tab-per-flex">
                        <div class="flex-center">
                            <van-icon size="18" name="user-circle-o" />
                            <span style="margin-left: 5px;">巡视人：</span>
                            <label>巡视人、巡视人</label>
                        </div>
                    </div>
                    <div class="tab-time">
                        <div class="time-t">
                            <van-icon size="18" name="underway-o" />
                            <span>巡视计划时间：</span>
                        </div>
                        <div class="time-cont">2020/06/09 09:21</div>
                    </div>
                </div>
            </div>
        </div>
        <!--运维计划-->
        <div>
            <div class="task-title">运维计划</div>
            <div class="tab-con">
                <div class="tab-item" v-for="(item,index) in showOperTaskList" :key="index">
                    <div class="tab-title">
                        <span>待执行</span>
                        <label>东善桥变全面巡视</label>
                        <div v-if="teamFlag" class="tab-check">
                            <van-checkbox 
                            checked-color="#17B39B"
                            v-model="item.checked"></van-checkbox>
                        </div>
                    </div>
                    <div class="tab-sub">
                        <span>交流110kv</span>
                        <label style="margin-left: 5px;">三类变电站</label>
                    </div>
                    <div class="tab-time">
                        <div class="time-t">
                            <van-icon size="18" name="underway-o" />
                            <span>巡视计划时间：</span>
                        </div>
                        <div class="time-cont">2020/06/09 09:21</div>
                    </div>
                </div>
            </div>
        </div>
        <div v-if="teamFlag" class="bottom-btn">
            <div>
                <van-checkbox 
                checked-color="#17B39B"
                @click="allSelTask"
                v-model="Allchecked">全选</van-checkbox> 
            </div>
            <div class="btn-i">
                <van-button class="btnS" plain size="small" color="#2ABAA3" type="primary" @click="beginTask">开展关联任务</van-button>
            </div>
            <div class="btn-i">
                <van-button class="btnS" size="small" color="#2ABAA3" type="primary" @click="endTask">继续结束任务</van-button>
            </div>
        </div>

        <div v-if="!teamFlag" class="bot-btn">
            <van-button class="btn-i" size="small" plain color="#2ABAA3" type="primary" @click="backTask">返回开展关联任务</van-button>
            <van-button class="btn-i" size="small" color="#2ABAA3" type="primary" @click="gotoFile">继续结束任务</van-button>
        </div>
	</article>
</template>
<script>
	import Theader from "../component/header"
	export default {
		name: "endTaskWarn",
		components:{
			Theader
		},
		data() {
			return {
				title: "结束提示",
                active: 0,
                teamFlag: true,
                activeNames:[],
                Allchecked:false,
				icon: {
                    checkOn:require('../../../../assets/tour/check_on.png'),
                    endWarn:require('../../../../assets/tour/end-warn.png'),
				},
				showPicker: false,
				taskName: "",//任务名称
				showTaskList:[
                    {
                        checked:false, 
                    },
                    {
                        checked:false, 
                    }
                ],
                showOperTaskList:[
                    {
                       checked:false, 
                    },
                    {
                       checked:false, 
                    },
                ]
            }
		},
		computed: {

		},
		methods: {
            /**
            * @description: 返回巡视列表
            * @param {*}
            * @return {*}
            */         
			backList() {

            },
            /**
             * @description: 结束关联任务=归档
             * @param {*}
             * @return {*}
             */
            gotoFile() {
                this.$router.push({
                    name: "cycleSubTourRecord",
                    query: {
                        params: ""
                    }
                })
            },
            /**
             * @description: 返回到结束任务页
             * @param {*}
             * @return {*}
             */
            backTask() {
                this.teamFlag = true;
            },
            /**
             * @description: 任务全选
             * @param {*}
             * @return {*}
             */
            allSelTask() {
                this.showTaskList.forEach(item => {
                    item.checked = true;
                })
                this.showTaskList.forEach(item => {
                    item.checked = true;
                })
            },
            /**
             * @description: 开展关联任务
             * @param {*}
             * @return {*}
             */
            beginTask() {
                this.teamFlag = false;
            },
            /**
             * @description: 结束当前任务
             * @param {*}
             * @return {*}
             */
            endTask() {
                this.teamFlag = false;
            }
		},
		watch: {
			
		},
		mounted() {

		}
	}
</script>
<style scoped>
	article {
		display: flex;
		flex-direction: column;
        overflow: auto;
        height: calc(100% - 4.5rem);
	}
	.bg_4dbfae{
		background: #F0F0F0 ;
	}
	.center_center{
        display:flex;
        justify-content:center;
        align-items:center;
	}
    .card{
        background: #fff;
        margin: 0.7rem;
        margin-top: 3.5rem;
        padding: 1rem 0;
    }
	.card .card-title{
        margin: 1rem;
        font-size: 1rem;
    }
    .card .card-content{
        margin: 0 1.5rem;
        font-size: 0.8rem;
        text-align: center;
        padding-bottom: 1rem;
    }
    .task-title{
        margin: 0.7rem;
        font-size: 1rem;
        color: #333;
        font-weight: bold;
    }
    .tab-con{
        margin: 0.7rem;
    }
    .tab-con .tab-item{
        padding: 0.5rem;
		background: #fff;
		position: relative;
		overflow: hidden;
        border-radius: 0.5rem;
        margin-bottom: 0.7rem;
	}
    .tab-icon{
		display: flex;
		position: absolute;
		right: -7%;
		top: 9%;
		transform: rotate(45deg);
	}
    .box3{
		width: 100px;
		z-index: 10;
		font-size: 13px;
		line-height: 24px;
		text-align: center;
		height: 24px;
		background: #18B49B;
		color: #fff;
	}
    .tab-title{
		font-size: 15px;
		font-weight: bold;
        display: flex;
        align-items: center;
		color:#333;
		padding: 0.5rem 0px;
	}
	.tab-title span{
        width: 4rem;
		color:#0EB295;
		margin-right: 10px;
	}
    .tab-title label{
        flex:1;
	}
    .tab-title .tab-check{
        width: 3rem;
    }
	.tab-sub{
		margin-bottom: 0.7rem;
		font-size: 13px;
    	color: #999;
	}
	.tab-per,.tab-time{
        display: flex;
        align-items: center;
		margin-bottom: 0.7rem;
		font-size: 13px;
    	color: #666;
	}
	.tab-per-flex{
		display: flex;
		justify-content: space-between;
	}
    .time-t{
        display: flex;
		justify-content: space-between;
    }
	.time-b{
       width: 5.5rem; 
       font-size: 12px;
    }
	.flex-center{
		display: flex;
		align-items: center;
	}

    .bottom-btn,.bot-btn{
        position: fixed;
        bottom: 0;
        width: 100%;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 1rem 0;
        font-size: 0.9rem;
    }
    .bot-btn .btn-i{
        width: 45%;
        height: 3rem;
    }
    .bottom-btn .btn-i{
        width: 35%;
    }
    .bottom-btn .btn-i .btnS{
        width: 95%;
        height: 3rem;
    }
    
</style>
